<template>
  <view class="relative_1">
    <headerNav :isShowNav="false" :navRightIcon="false" bgcolor="#1FB0AD" leftIconColor="#fff" title="我的订单" titleColor="#fff" />
    <view class="box1 prow30 pt30">
      <view class="prow30 bg-white rounded-20 relative_1 pt20 mb20" v-for="(item,index) in orderList" :key="index">
        <view class="flex justify-between items-center pt24 pb24 bb_gray_2">
          <view class="flex items-center">
            <text class="text-666 fs24">下单时间：</text>
            <text class="text-666 fs24">{{ item.create_time }}</text>
          </view>
          <text class="text-666 fs24">{{ +item.is_pay === 0? '待付款' : '已付款' }}</text>
        </view>
        <view class="fs28 c-000 pt20 pb16">{{item.title}}</view>
        <view class="flex justify-between1 pt24 pb24 bb_gray_2">
          <view class="flex items-center flex-1">
            <view class="w-120 member_img flex items-center justify-center text-white fs26">
              <!-- <image class="w-120 member_img" src="" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
              </image>-->
              懂鲜会员
            </view>
            <view class="flex-1 pl30">
              <view class="flex justify-between items-center">
                <view class="c-000 fs26">{{item.vip_name}}</view>
                <view class="fs32 c-333 flex">
                  <text class="fs32 c-333">¥</text>
                  <text class="fs32 c-333">{{item.money}}</text>
                </view>
              </view>
              <view>
                <text class="text-666 fs22">有效期：</text>
                <text class="text-666 fs22">{{item.vip_start_time}}</text>
                <text class="text-666 fs22">至</text>
                <text class="text-666 fs22">{{item.vip_end_time}}</text>
              </view>
              <view>
                <text class="text-666 fs24">订单号：</text>
                <text class="text-666 fs24">{{item.out_trade_no}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="flex items-center justify-between pt24 pb24 bb_gray_2">
          <view class="flex items-center">
            <text class="text-666 fs22">共计1件商品</text>
            <text class="text_theme fs22 pl10">总计:￥</text>
            <text class="text_theme fs28 pl10">{{item.money}}</text>
          </view>
          <view class="pay" v-if="+item.is_pay === 0"></view>
        </view>
      </view>
    </view>
    <view class="tac text-999 fs24 no_more relative_1" v-if="orderList.length >= total && total !== 0">没有更多了</view>
    <view class="tac text-white fs24 no_more relative_1" v-if="total === 0">没有订单</view>
  </view>
</template>

<script>
import isAuditIos from '@/common/isAuditIos.js'
export default {
  components: {
  },
  mixins: [isAuditIos],
  data() {
    return {
      page: 1,
      orderList: [],
      total: 0,
      loading: false,
      is_vip: 1
    }
  },
  onLoad(option) {
    console.log('%c [ option ]-73', 'font-size:13px; background:pink; color:#bf2c9f;', option)
    this.is_vip = option.is_vip
  },
  onShow() {
    this.page = 1
    this.getOrderList()
  },
  onReachBottom() {
    if (this.orderList.length >= this.total && this.total !== 0) return
    if (this.total === 0) return
    if (this.loading) return
    this.loading = true
    this.page++
    console.log('%c [ this.page ]-78', 'font-size:13px; background:pink; color:#bf2c9f;', this.page)
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      const { data, code, msg } = await this.post('api/pay/orderList', { page: this.page }, true)
      console.log('%c [ data ]-79', 'font-size:13px; background:pink; color:#bf2c9f;', data)
      if (code !== 1) {
        this.loading = false
        return this.$u.toast(msg)
      }
      if (this.page === 1) {
        this.orderList = data.data
      } else {
        this.orderList = [...this.orderList, ...data.data]
      }
      this.total = data.total
      this.loading = false
    },
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}
.member_img {
  width: 120rpx;
  height: 120rpx;
  background-color: #1fb0ad;
  border-radius: 16rpx;
  overflow: hidden;
}
.no_more {
  padding: 30rpx 0;
  text-align: center;
}
.pay {
  width: 100rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
  border-radius: 30rpx;
  background-color: #1fb0ad;
  color: #fff;
  font-size: 24rpx;
}
</style>
